<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <a-form :form="form" :labelCol="{ span: 5 }" labelAlign="left">
      <a-form-item label="食物类型：" :wrapperCol="{ span: 18 }" required c>
        <a-select
          :value="form.type ? form.type : undefined"
          @change="handleChange('type', $event)"
          placeholder="请选择食物类型"
        >
          <a-select-option
            v-for="i in typeOptions"
            :key="i.id"
            :value="i.value"
          >
            {{ i.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="品牌名称：" :wrapperCol="{ span: 18 }" required>
        <a-input
          placeholder="请输入品牌名称"
          :value="form.brand"
          @change="handleChange('brand', $event)"
        />
      </a-form-item>
      <a-form-item label="食物成份" :wrapperCol="{ span: 18 }" required>
        <a-select
          :value="form.ingredients.length ? form.ingredients : []"
          mode="multiple"
          @change="handleChange('ingredients', $event)"
          placeholder="请选择食物成份"
        >
          <a-select-option
            v-for="i in ingredientsOptions"
            :key="i.id"
            :value="i.value"
          >
            {{ i.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="食物用途" :wrapperCol="{ span: 18 }" required>
        <a-select
        :value="form.use ? form.use : undefined"
          @change="handleChange('use', $event)"
          placeholder="请选择食物用途"
        >
          <a-select-option v-for="i in useOptions" :key="i.id" :value="i.value">
            {{ i.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="食物口味/种类" :wrapperCol="{ span: 18 }" required>
        <a-select
        :value="form.taste ? form.taste :undefined"
 @change="handleChange('taste', $event)"
          placeholder="请选择食物口味/种类"
        >
          <a-select-option
            v-for="i in tasteOptions"
            :key="i.id"
            :value="i.value"
          >
            {{ i.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="食物适用对象" :wrapperCol="{ span: 18 }" required>
        <a-select
        :value="form.apply ? form.apply  : undefined"
          @change="handleChange('apply', $event)"
          placeholder="请选择食物适用对象"
        >
          <a-select-option
            v-for="i in applyOptions"
            :key="i.id"
            :value="i.value"
          >
            {{ i.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="食物包装规格" :wrapperCol="{ span: 18 }" required>
        <a-select
        :value="form.packages ? form.packages: undefined"
@change="handleChange('packages', $event)"
          placeholder="请选择食物包装规格"
        >
          <a-select-option
            v-for="i in packagesOptions"
            :key="i.id"
            :value="i.value"
          >
            {{ i.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="剩余数量" :wrapperCol="{ span: 18 }" required>
        <a-input-number
          style="width: 100% !important"
          placeholder="请输入剩余数量"
          :min="1"
          :value="form.residue"
          @change="handleChange('residue', $event)"
        />
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import {
  typeOptions,
  ingredientsOptions,
  useOptions,
  tasteOptions,
  packagesOptions,
} from "./const";
export default {
  name: "FoodForm",
  emit: ["setFoodForm"],
  props: ["form","applyOptions"],
  data() {
    return {
      typeOptions,
      ingredientsOptions,
      useOptions,
      tasteOptions,
      packagesOptions,
    };
  },
  methods: {
    handleChange(type, target) {
      console.log("target", type, target);
      this.$emit("setFoodForm", {
        value: ["brand"].includes(type) ? target.target.value : target,
        type,
      });
    },
  },
};
</script>

<style scoped>
.rounded_8 {
  border-radius: 8px;
}
</style>
